$(function () {
    chrome.bookmarks.getTree((res) => {
        var str = "";
        console.log(res)
        for (var item of res[0]['children'][0]['children']) {
            
            str += '<li draggable="true" style="border-bottom:1px dashed red;padding-bottom:5px;" ><i style="color:red;margin-right:10px;padding:5px" data-id="'+item['id']+'">X</i><span data-url="' + item['url'] + '">' + item['title'] + '</span></li>';
        }
        $(".list").append(str);
    })
    $('.list').on('click', 'span', function () {
        var url = $(this).attr('data-url');
        chrome.tabs.create({ url: url });
      
    })
/* 
    $(".list").delegate('span','mousedown',function(){
        var sourceid=$(this).prev().attr('data-id');
        //alert(sourceid)
        $(".list").delegate('span','mouseup',function(){
            var targetid=$(this).prev().attr('data-id');
            //alert(targetid)
            chrome.bookmarks.move(sourceid, targetid, function (res){
                alert(res)
            })
        })
    }) */
   
   /*  var chaid,targetid;
    $('.list li').on('dragstart','span',function (e) {
        e.preventDefault()
        chaid = $(this).attr('data-id');
        alert(chaid)
   
      
      
    })
    $('.list li').on('drop','li',function (e) {
        e.preventDefault()
        targetid = $(this).attr('data-id');
        chrome.bookmarks.move(chaid, targetid, function (res){
            console.log(res)
        })

      
    }) */
    $('.list').on('click', 'i', function () {
       var id = $(this).attr('data-id');
       chrome.bookmarks.remove(id, (res) => {
          $(this).parent().remove();
        
       })
      
    })
   
})
